
import React,{Component} from 'react';
var Highcharts = require('highcharts');
// 在 Highcharts 加载之后加载功能模块
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/highcharts-3d')(Highcharts);

export  class H3DPieChart extends Component{
    constructor(props){
        super(props);
        this.state={};
    }
    componentDidMount(){
        // let myChart = echarts.init(this.domIns);
        // this.setState({myChart});
        Highcharts.chart(this.domIns, {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 10,
                    beta: 20
                },
                backgroundColor: 'rgba(0,0,0,0)'
            },		       
            title: {
                text: this.props.title || '' ,
                floating:true,
                style:{
                    fontSize: "15px"
                   },
            },
            credits:{
                enabled: false
            },
            exporting:{
                enabled:false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            legend: {
                align: 'right', //水平方向位置
                verticalAlign: 'middle', //垂直方向位置
                width: 120,
                itemStyle:{
                    color:'#fff'
                }
            },
                series: this.props.series
        });
        this.forceUpdate();
    }
    render(){
        // this.state.myChart && this.props.option && this.state.myChart.setOption(this.props.option);
        return(
            <div  style = {this.props.style} ref = {(ins)=>{
                this.domIns = ins;
            }}>
            </div>
        )
    }
}